<template>
  <div class="app-container">
    <vxe-split class="content" border vertical>
      <vxe-split-pane height="40%">
        <vxe-form
          ref="formRef"
          :border="border"
          :title-background="titleBackground"
          vertical-align="center"
          title-width="100"
          :rules="formRules"
          :data="formData"
        >
          <vxe-form-group span="24" title="分切主数据" title-bold vertical>
            <!-- <vxe-form-item
              title="工位"
              field="workstationId"
              span="4"
              :item-render="{ name: 'VxeInput' }"
            ></vxe-form-item> -->
            <vxe-form-item title="条码" field="scanBarcode" span="12">
              <template #default="{ data }">
                <vxe-input
                  v-model="formData.scanBarcode"
                  @keydown.enter="inputEnter(data.scanBarcode)"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="工单" field="workNo" span="4">
            </vxe-form-item>
            <vxe-form-item
              title="工序"
              field="proceduresName"
              span="4"
            ></vxe-form-item>
            <vxe-form-item title="设备" field="equipmentId" span="4">
              <template #default="{ data }">
                <vxe-select
                  v-model="formData.equipmentId"
                  v-bind="equipmentOptions"
                ></vxe-select>
              </template>
            </vxe-form-item>

            <vxe-form-item title="班组" field="teamId" span="8">
              <template #default="{ data }">
                <vxe-select
                  v-model="formData.teamId"
                  placeholder="可搜索"
                  :remote-config="remoteConfig"
                  clearable
                  filterable
                  remote
                >
                  <vxe-option
                    v-for="item in opts1"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item title="班组人员" field="worker" span="8">
              <template #default="{ data }">
                <vxe-select
                  v-model="formData.worker"
                  placeholder="可搜索"
                  :remote-config="remoteConfig2"
                  clearable
                  filterable
                  remote
                >
                  <vxe-option
                    v-for="item in opts2"
                    :key="item.userId"
                    :value="item.userId"
                    :label="item.userName"
                  ></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item
              title="备注"
              field="remark"
              span="8"
              :item-render="{ name: 'VxeInput' }"
            ></vxe-form-item>

            <vxe-form-item title="原材料" field="rawMaterial" span="12">
              <template #default="{ data }">
                <vxe-input
                  v-model="formData.rawMaterial"
                  @keydown.enter="rawInputEnter(data.rawMaterial)"
                ></vxe-input>
              </template>
            </vxe-form-item>

            <vxe-form-item title="卷数" field="rollNums" span="6">
              <template #default="{ data }">
                <vxe-number-input
                  min="0"
                  max="100"
                  type="integer"
                  v-model="formData.rollNums"
                  @keydown.enter="rollNumsInputEnter(data.rollNums)"
                ></vxe-number-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="接口卷号" field="interfaceNums" span="6">
              <template #default="{ data }">
                <vxe-input
                  v-model="formData.interfaceNums"
                  @keydown.enter="interfaceNumsInputEnter(data.interfaceNums)"
                ></vxe-input>
              </template>
            </vxe-form-item>

            <vxe-form-item
              title="物料编号"
              field="materialCode"
              span="6"
            ></vxe-form-item>
            <vxe-form-item
              title="物料名称"
              field="materialName"
              span="6"
            ></vxe-form-item>
            <vxe-form-item title="数量" field="weight" span="6"></vxe-form-item>
            <vxe-form-item
              title="计划完成时间"
              field="planTime"
              :title-width="140"
              span="6"
            ></vxe-form-item>
          </vxe-form-group>
        </vxe-form>
      </vxe-split-pane>
      <vxe-split-pane height="50%">
        <vxe-tabs
          v-model="activeTab"
          style="height: 100%"
          destroyOnClose="false"
        >
          <vxe-tab-pane title="子卷信息" name="1">
            <vxe-grid ref="gridRef" v-bind="gridOptions">
              <template #active="{ row }">
                <vxe-button
                  mode="text"
                  status="primary"
                  content="删除"
                  icon="vxe-icon-edit"
                  @click="deleteData(row)"
                ></vxe-button>

                <vxe-button
                  mode="text"
                  status="primary"
                  content="原材料"
                  icon="vxe-icon-edit"
                  @click.stop="searchRawData(row)"
                ></vxe-button>

                <vxe-button
                  mode="text"
                  status="primary"
                  content="新增不良"
                  icon="vxe-icon-edit"
                  @click.stop="recordDefective(row)"
                ></vxe-button>
                <vxe-button
                  mode="text"
                  status="primary"
                  content="不良记录"
                  icon="vxe-icon-edit"
                  @click.stop="searchFaultData(row)"
                ></vxe-button>
                <vxe-button
                  mode="text"
                  status="primary"
                  content="过程参数"
                  icon="vxe-icon-edit"
                  @click.stop="searchFaultData(row)"
                ></vxe-button>
              </template>
            </vxe-grid>
          </vxe-tab-pane>
          <vxe-tab-pane title="原材料信息" name="2">
            <vxe-grid ref="gridRef2" v-bind="gridOptions2">
              <template #active="{ row }">
                <vxe-button
                  mode="text"
                  status="primary"
                  content="编辑"
                  icon="vxe-icon-edit"
                  @click.stop="updateRow(row)"
                ></vxe-button>
                <vxe-button
                  mode="text"
                  status="primary"
                  content="删除"
                  icon="vxe-icon-edit"
                  @click="deleteData(row)"
                ></vxe-button>
                <vxe-button
                  mode="text"
                  status="primary"
                  content="修改状态"
                  icon="vxe-icon-edit"
                  @click="updateWoRawStatus(row)"
                ></vxe-button>
              </template>
            </vxe-grid>
          </vxe-tab-pane>
          <vxe-tab-pane title="缺陷记录" name="3">
            <vxe-grid ref="gridRef3" v-bind="gridOptions3">
              <template #active="{ row }">
                <vxe-button
                  mode="text"
                  status="primary"
                  content="编辑"
                  icon="vxe-icon-edit"
                  @click.stop="updateRow(row)"
                ></vxe-button>
                <vxe-button
                  mode="text"
                  status="primary"
                  content="删除"
                  icon="vxe-icon-edit"
                  @click="deleteData(row)"
                ></vxe-button>
                <vxe-button
                  mode="text"
                  status="primary"
                  content="修改状态"
                  icon="vxe-icon-edit"
                  @click="updateWoRawStatus(row)"
                ></vxe-button>
              </template>
            </vxe-grid>
          </vxe-tab-pane>
          <vxe-tab-pane title="参数采集" name="4">
            <vxe-grid ref="gridRef4" v-bind="gridOptions4">
              <template #active="{ row }">
                <vxe-button
                  mode="text"
                  status="primary"
                  content="编辑"
                  icon="vxe-icon-edit"
                  @click.stop="updateRow(row)"
                ></vxe-button>
                <vxe-button
                  mode="text"
                  status="primary"
                  content="删除"
                  icon="vxe-icon-edit"
                  @click="deleteData(row)"
                ></vxe-button>
                <vxe-button
                  mode="text"
                  status="primary"
                  content="修改状态"
                  icon="vxe-icon-edit"
                  @click="updateWoRawStatus(row)"
                ></vxe-button>
              </template>
            </vxe-grid>
          </vxe-tab-pane>
        </vxe-tabs>
      </vxe-split-pane>
      <vxe-split-pane height="10%">
        <vxe-button
          status="primary"
          content="开工"
          @click="startWoRawClick"
        ></vxe-button>
        <vxe-button status="success" content="暂停"></vxe-button>
        <vxe-button
          status="info"
          content="完工"
          @click="endWoRawClick"
        ></vxe-button>
        <vxe-button status="warning" content="标签打印"></vxe-button>

        <vxe-button
          content="接口信息"
          status="error"
          @click="parameterAcquisition"
        ></vxe-button>
      </vxe-split-pane>

      <!-- <vxe-split-pane>
        <div style="height: 33%; background-color: #d8d8f9">底部</div>
      </vxe-split-pane> -->
    </vxe-split>
    <vxe-modal v-model="showPopup" v-bind="modalOptions" :loading="loading">
      <template #default>
        <vxe-form
          v-bind="formOptions"
          @submit="submitEvent"
          @reset="resetEvent"
        ></vxe-form>
      </template>
    </vxe-modal>

    <!--修改状态记录-->
    <vxe-modal v-model="showPopup2" v-bind="modalOptions2" :loading="loading">
      <template #default>
        <vxe-form
          v-bind="formOptions2"
          @submit="submitEvent2"
          @reset="resetEvent"
        ></vxe-form>
      </template>
    </vxe-modal>
    <!--缺陷记录-->
    <vxe-modal v-model="showPopup3" v-bind="modalOptions3" :loading="loading">
      <template #default>
        <vxe-form
          v-bind="formOptions3"
          @submit="submitEvent3"
          @reset="resetEvent"
        ></vxe-form>
      </template>
    </vxe-modal>
    <!--原材料选择-->
    <vxe-modal
      v-model="showPopup5"
      v-bind="modalOptions5"
      show-footer
      :loading="loading"
      show-confirm-button
      @confirm="confirmEvent"
    >
      <template #default>
        <vxe-grid
          ref="gridRef2"
          :confirm-closable="false"
          v-bind="gridOptions5"
          @toolbar-button-click="toolbarButtonClickEvent"
          @form-submit="formSubmitEvent"
          @form-reset="formResetEvent"
        >
        </vxe-grid>
      </template>
    </vxe-modal>
  </div>
</template>
<script>
import { VxeUI } from "vxe-pc-ui";
import {
  getWorkOrderByPage,
  addWorkOrder,
  delWorkOrder,
} from "@/api/product/workOrder";
import {
  getTeamByPage,
  addTeam,
  selectUserListByTeam,
  getUserByTeamId,
  addTeamUser,
} from "@/api/baseData/team";
import {
  addWoRaw,
  getWoRawByPage,
  updateWoRawStatus,
} from "@/api/product/woRaw";
import {
  addWoRawRel,
  startWoRaw,
  insertWoRawRel,
  endWoRaw,
} from "@/api/product/woRawRel";
import { getWoRawSubByPage } from "@/api/product/woRawSub";
import {
  getWoRawSubRelFaultByPage,
  addWoRawSubRelFault,
} from "@/api/product/woRawSubRelFault";

import {
  getWoTagValueByPage,
  addWoTagValue,
  delWoTagValue,
  updateWoTagValue,
} from "@/api/product/woTagValue";

import { getUserNameByTeamId } from "@/api/baseData/team";
import { getFaultTypeByPage } from "@/api/product/faultType";
import { getEquipAndProcessByWo } from "@/api/baseData/procedures";
import XEUtils from "xe-utils";
// 模拟后端接口
const getApiList = (quert) => {
  let idKey = 1;
  return new Promise((resolve) => {
    setTimeout(() => {
      const list = XEUtils.range(0, XEUtils.random(1, 10)).map(() => {
        return {
          value: idKey++,
          label: `选项${idKey}_${quert.searchValue}`,
        };
      });
      resolve(list);
    }, 200);
  });
};
export default {
  async created() {
    this.remoteConfig = {
      queryMethod: async ({ searchValue }) => {
        const result = await getTeamByPage({
          total: 2,
          pageSize: 10,
          currentPage: 1,
        });
        this.opts1 = result.data.records;
      },
    };
    this.remoteConfig2 = {
      queryMethod: async ({ searchValue }) => {
        /**
         * 如果班组人员不够
         */
        if (null == this.formData.teamId || "" == this.formData.teamId) {
          VxeUI.modal.message({
            content: "请先选择班组",
            status: "warning",
          });
          return;
        }
        const result = await getUserNameByTeamId({
          total: 2,
          pageSize: 10,
          currentPage: 1,
          id: this.formData.teamId,
        });
        this.opts2 = result.data;
      },
    };
    const result = await getFaultTypeByPage({
      currentPage: 1,
      pageSize: 200,
    });
    this.faultTypeListRender.options = result.data.records
      .filter((item) => item.id != null || item.name != "")
      .map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    console.log(
      this.faultTypeListRender.options,
      "===>this.faultTypeListRender.options"
    );
  },
  async mounted() {
    const { wo, proceduresNum, type } = this.$route.query;
    if (undefined != wo) {
      this.formData.workNo = wo;
      let result = await getEquipAndProcessByWo({
        sequence: proceduresNum,
        woType: type,
      });
      this.equipmentOptions.options = result.data.equipmentConfigVoList.map(
        (item) => {
          return { label: item.name, value: item.id };
        }
      );
      this.processRelVo = result.data.processRelVo;

      this.formData.proceduresName = this.processRelVo.proceduresName;
    }

    // console.log(this.equipmentConfigVoList, this.processRelVo, "---id---");
  },
  data() {
    //子卷信息
    const gridOptions = {
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,
      maxHeight: 350,
      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      // toolbarConfig: {
      //   refresh: true,
      //   import: true,
      //   export: true,
      //   print: true,
      //   zoom: true,
      //   custom: true,
      //   buttons: [
      //     { name: "新增", code: "myAdd", status: "primary" },
      //     { name: "删除", code: "myDel", status: "error" },
      //     { name: "保存", code: "mySave", status: "success" },
      //   ],
      // },
      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 8,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
              },
            },
          },

          {
            collapseNode: true,
            align: "right",
            span: 8,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        { field: "seq", type: "seq", width: 70 },

        { field: "wo", title: "工单号", sortable: true, width: 180 },
        { field: "serialNo", title: "序列号", sortable: true, width: 180 },
        // {
        //   field: "materilNo",
        //   title: "物料编码",
        //   sortable: true,
        //   width: 180,
        // },
        // {
        //   field: "materilDesc",
        //   title: "物料描述",
        //   sortable: true,
        //   width: 180,
        // },

        {
          field: "hasInterface",
          title: "是否有接口",
          sortable: true,
          width: 180,
        },
        {
          field: "interfaceMu",
          title: "接口母卷号",
          sortable: true,
          width: 180,
        },
        {
          field: "rawType",
          title: "类型",
          sortable: true,
          width: 180,
        },
        // {
        //   field: "status",
        //   title: "状态",
        //   sortable: true,
        //   width: 180,
        // },

        // {
        //   field: "startTime",
        //   title: "计划开工时间",
        //   sortable: true,
        //   width: 180,
        // },
        { field: "createTime", title: "创建时间", width: 180 },
        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 600,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            console.log(page, sorts, form, "----");
            // const value = localStorage.getItem("MES_CONVERT_WO");
            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getWoRawSubByPage({
              ...page,
              wo: this.formData.workNo,
            });
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    const gridOptions2 = {
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,

      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      // toolbarConfig: {
      //   refresh: true,
      //   import: true,
      //   export: true,
      //   print: true,
      //   zoom: true,
      //   custom: true,
      //   buttons: [
      //     { name: "新增", code: "myAdd", status: "primary" },
      //     { name: "删除", code: "myDel", status: "error" },
      //     { name: "保存", code: "mySave", status: "success" },
      //   ],
      // },
      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 8,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
              },
            },
          },

          {
            collapseNode: true,
            align: "right",
            span: 8,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        { field: "seq", type: "seq", width: 70 },

        { field: "rawCode", title: "物料编号", sortable: true, width: 180 },
        {
          field: "wo",
          title: "工单号",
          sortable: true,
          width: 180,
        },
        {
          field: "qty",
          title: "数量",
          sortable: true,
          width: 180,
        },

        {
          field: "batchCode",
          title: "批次号",
          sortable: true,
          width: 180,
        },

        {
          field: "rawType",
          title: "类型",
          sortable: true,
          width: 180,
        },
        {
          field: "status",
          title: "状态",
          sortable: true,
          width: 180,
        },

        // {
        //   field: "startTime",
        //   title: "计划开工时间",
        //   sortable: true,
        //   width: 180,
        // },
        { field: "createTime", title: "创建时间", width: 180 },
        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 300,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            console.log(page, sorts, form, "----");
            // const value = localStorage.getItem("MES_CONVERT_WO");
            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getWoRawByPage({
              ...page,
              wo: this.woRawSub.wo ? this.woRawSub.wo : this.formData.workNo,
              subId: this.woRawSub.id ? this.woRawSub.id : null,
            });
            this.woRawSub = { id: null, wo: null };
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    const gridOptions3 = {
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,

      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      // toolbarConfig: {
      //   refresh: true,
      //   import: true,
      //   export: true,
      //   print: true,
      //   zoom: true,
      //   custom: true,
      //   buttons: [
      //     { name: "新增", code: "myAdd", status: "primary" },
      //     { name: "删除", code: "myDel", status: "error" },
      //     { name: "保存", code: "mySave", status: "success" },
      //   ],
      // },
      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 8,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
              },
            },
          },

          {
            collapseNode: true,
            align: "right",
            span: 8,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        { field: "seq", type: "seq", width: 70 },

        {
          field: "faultTypeName",
          title: "故障名称",
          sortable: true,
          width: 180,
        },
        {
          field: "startMetre",
          title: "开始米数",
          sortable: true,
          width: 180,
        },
        {
          field: "endMetre",
          title: "结束米数",
          sortable: true,
          width: 180,
        },

        // {
        //   field: "startTime",
        //   title: "计划开工时间",
        //   sortable: true,
        //   width: 180,
        // },
        { field: "createTime", title: "创建时间", width: 180 },
        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 300,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            // console.log(page, sorts, form, "----");

            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getWoRawSubRelFaultByPage({
              ...page,
              // wo: this.woRawSub.wo
              //   ? this.woRawSub.wo
              //   : value
              //   ? JSON.parse(value)
              //   : null,
              /**
               * 子卷信息
               */
              woRawSubId: this.woRawSub.id ? this.woRawSub.id : null,
            });
            this.woRawSub = { id: null, wo: null };
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    const gridOptions4 = {
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,

      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      // toolbarConfig: {
      //   refresh: true,
      //   import: true,
      //   export: true,
      //   print: true,
      //   zoom: true,
      //   custom: true,
      //   buttons: [
      //     { name: "新增", code: "myAdd", status: "primary" },
      //     { name: "删除", code: "myDel", status: "error" },
      //     { name: "保存", code: "mySave", status: "success" },
      //   ],
      // },
      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 8,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
              },
            },
          },

          {
            collapseNode: true,
            align: "right",
            span: 8,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        { field: "seq", type: "seq", width: 70 },

        {
          field: "deviceCode",
          title: "设备编码",
          sortable: true,
          width: 180,
        },
        {
          field: "tagCode",
          title: "变量编号",
          sortable: true,
          width: 180,
        },
        {
          field: "tagValue",
          title: "变量值",
          sortable: true,
          width: 180,
        },

        {
          field: "wo",
          title: "生产订单",
          sortable: true,
          width: 180,
        },

        {
          field: "productMaterialCode",
          title: "成品物料",
          sortable: true,
          width: 180,
        },
        {
          field: "batchNo",
          title: "批次编号",
          sortable: true,
          width: 180,
        },
        {
          field: "batchCode",
          title: "外部批次编号",
          sortable: true,
          width: 180,
        },
        {
          field: "startMeter",
          title: "开始米数",
          sortable: true,
          width: 180,
        },
        {
          field: "endMeter",
          title: "结束米数",
          sortable: true,
          width: 180,
        },
        // {
        //   field: "startTime",
        //   title: "计划开工时间",
        //   sortable: true,
        //   width: 180,
        // },
        { field: "createTime", title: "创建时间", width: 180 },
        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 300,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            // console.log(page, sorts, form, "----");

            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getWoTagValueByPage({
              ...page,
              // wo: this.woRawSub.wo
              //   ? this.woRawSub.wo
              //   : value
              //   ? JSON.parse(value)
              //   : null,
              /**
               * 子卷信息
               */
              woRawSubId: this.woRawSub.id ? this.woRawSub.id : null,
            });
            this.woRawSub = { id: null, wo: null };
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    const tableData = [
      // {
      //   id: 10000,
      //   workNo: "workNo",
      //   motherRoll: "Test1",
      //   sonRoll: "sonRoll",
      //   materilNo: "mp3",
      //   materilDesc: 1024,
      //   weight: "10",
      //   unit: "千克",
      // },
    ];
    const tableData2 = [
      // {
      //   id: 10000,
      //   rawCode: "workNo",
      //   batchCode: "Test1",
      //   wo: "sonRoll",
      //   status: "mp3",
      // },
    ];
    const rowConfig = {
      keyField: "id",
    };
    const treeConfig = {
      transform: true,
      rowField: "id",
      parentField: "parentId",
    };
    const editConfig = {
      trigger: "click",
      mode: "cell",
      showStatus: true,
    };
    const formData = {
      scanBarcode: "",
      workstationId: "", //工位信息
      workNo: "", //工单信息
      proceduresName: "工序信息",
      equipmentId: null,
      teamId: "",
      worker: "",
      remark: "",
      rawMaterial: "",
      rollNums: "",
      materialCode: "",
      materialName: "",
      weight: "",
      planTime: "",
      interfaceNums: "",
    };
    const formRules = {
      scanBarcode: [{ required: true, message: "必须填写" }],
      workstationId: [{ required: true, message: "必须填写" }],
      workNo: [
        {
          required: true,
          pattern: "\\d{2}-\\d{5}",
          message: "字母开头5~10位数",
        },
      ],
      teamId: [{ required: true, message: "必须填写" }],
      rawMaterial: [{ required: true, message: "必须填写" }],
      // rawMaterial: [
      //   {
      //     required: true,
      //     pattern: "^[a-zA-Z]\\w{5,7}$",
      //     message: "字母开头5~10位数",
      //   },
      // ],
      // role: [{ required: true, message: "必须填写" }],
    };
    const showPopup = false;
    const showPopup2 = false;
    const showPopup3 = false;
    const modalOptions = {
      title: "在弹窗中使用表单",
      width: 800,

      escClosable: true,
      resize: true,
      showMaximize: true,
      //禁止拖动
      draggable: true,
    };
    const modalOptions2 = {
      title: "在弹窗中使用表单",
      width: 800,

      escClosable: true,
      resize: true,
      showMaximize: true,
      //禁止拖动
      draggable: true,
    };
    const modalOptions3 = {
      title: "在弹窗中使用表单",
      width: 800,

      escClosable: true,
      resize: true,
      showMaximize: true,
      //禁止拖动
      draggable: true,
    };
    const modalOptions5 = {
      title: "在弹窗中使用表单",
      width: "80%",

      escClosable: true,
      // resize: true,
      // showMaximize: true,
      //禁止拖动
      draggable: false,
    };
    const gridOptions5 = {
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,

      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      // toolbarConfig: {
      //   refresh: true,
      //   import: true,
      //   export: true,
      //   print: true,
      //   zoom: true,
      //   custom: true,
      //   buttons: [
      //     { name: "新增", code: "myAdd", status: "primary" },
      //     { name: "删除", code: "myDel", status: "error" },
      //     { name: "保存", code: "mySave", status: "success" },
      //   ],
      // },
      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 8,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
              },
            },
          },

          {
            collapseNode: true,
            align: "right",
            span: 8,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        { field: "seq", type: "seq", width: 70 },

        { field: "rawCode", title: "物料编号", sortable: true, width: 180 },
        {
          field: "wo",
          title: "工单号",
          sortable: true,
          width: 180,
        },
        {
          field: "qty",
          title: "数量",
          sortable: true,
          width: 180,
        },

        {
          field: "batchCode",
          title: "批次号",
          sortable: true,
          width: 180,
        },

        {
          field: "rawType",
          title: "类型",
          sortable: true,
          width: 180,
        },
        {
          field: "status",
          title: "状态",
          sortable: true,
          width: 180,
        },

        // {
        //   field: "startTime",
        //   title: "计划开工时间",
        //   sortable: true,
        //   width: 180,
        // },
        { field: "createTime", title: "创建时间", width: 180 },
        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 300,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            console.log(page, sorts, form, "----");
            // const value = localStorage.getItem("MES_CONVERT_WO");
            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getWoRawByPage({
              ...page,
              wo: this.woRawSub.wo ? this.woRawSub.wo : this.formData.workNo,
              subId: this.woRawSub.id ? this.woRawSub.id : null,
            });
            this.woRawSub = { id: null, wo: null };
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    const formOptions = {
      data: {
        length: "",
      },
      rules: {
        length: [{ required: true, message: "必填" }],

        // role: [{ required: true, message: "角色必填" }],
        // sex: [{ required: true, message: "性别必选" }],
        // age: [
        //   { required: true, message: "年龄必填" },
        //   { type: "number", min: 18, max: 46, message: "年龄范围18~46" },
        // ],
      },
      items: [
        {
          field: "length",
          title: "长度",
          span: 24,
          itemRender: { name: "VxeInput" },
        },
        {
          align: "center",
          span: 24,
          itemRender: {
            name: "VxeButtonGroup",
            options: [
              { type: "submit", content: "提交", status: "primary" },
              { type: "reset", content: "重置" },
            ],
          },
        },
      ],
    };
    const formOptions2 = {
      data: {
        id: 0,
        status: "",
      },
      rules: {
        // length: [{ required: true, message: "必填" }],
        // role: [{ required: true, message: "角色必填" }],
        // sex: [{ required: true, message: "性别必选" }],
        // age: [
        //   { required: true, message: "年龄必填" },
        //   { type: "number", min: 18, max: 46, message: "年龄范围18~46" },
        // ],
      },
      items: [
        {
          field: "status",
          title: "状态",
          span: 24,
          itemRender: {
            name: "VxeSelect",
            options: [
              { label: "已消耗", value: "已消耗" },
              { label: "未消耗", value: "未消耗" },
            ],
          },
        },
        {
          align: "center",
          span: 24,
          itemRender: {
            name: "VxeButtonGroup",
            options: [
              { type: "submit", content: "提交", status: "primary" },
              { type: "reset", content: "重置" },
            ],
          },
        },
      ],
    };
    // const opts3 = [
    //   { label: "女", value: "Women" },
    //   { label: "男", value: "Man" },
    // ];
    const faultTypeListRender = {
      name: "VxeSelect",
      props: {
        multiple: true,
        clearable: true,
      },
      options: [],
    };
    const formOptions3 = {
      data: {
        id: 0,
        startMetre: "",
        endMetre: "",
        faultTypeList: "",
        woRawSubId: 0,
      },
      rules: {
        // length: [{ required: true, message: "必填" }],
        // role: [{ required: true, message: "角色必填" }],
        // sex: [{ required: true, message: "性别必选" }],
        // age: [
        //   { required: true, message: "年龄必填" },
        //   { type: "number", min: 18, max: 46, message: "年龄范围18~46" },
        // ],
      },
      items: [
        {
          field: "startMetre",
          title: "米数起始位置",
          span: 24,
          itemRender: { name: "VxeInput" },
        },
        {
          field: "endMetre",
          title: "米数结束位置",
          span: 24,
          itemRender: { name: "VxeInput" },
        },
        {
          field: "faultTypeList",
          title: "缺陷类型",
          span: 24,
          itemRender: faultTypeListRender,
        },
        {
          align: "center",
          span: 24,
          itemRender: {
            name: "VxeButtonGroup",
            options: [
              { type: "submit", content: "提交", status: "primary" },
              { type: "reset", content: "重置" },
            ],
          },
        },
      ],
    };
    const opts1 = [];
    const opts2 = [];

    const remoteConfig = {};
    const remoteConfig2 = {};
    const woRawSub = { id: 0, wo: "" };
    const equipmentConfigVoList = [{ id: 0, name: "" }];
    const processRelVo = { id: 0, proceduresName: "" };
    const equipmentOptions = {
      loading: false,
      placeholder: "默认最后一条",
      defaultConfig: {
        selectMode: "last",
      },
      options: [],
    };
    return {
      activeTab: "1",
      border: true,
      titleBackground: false,
      formData,
      formRules,
      tableData,
      tableData2,
      rowConfig,
      treeConfig,
      editConfig,
      gridOptions,
      gridOptions2,
      gridOptions3,
      gridOptions4,
      showPopup,
      modalOptions,
      formOptions,

      showPopup2,
      modalOptions2,
      formOptions2,

      showPopup3,
      modalOptions3,
      faultTypeListRender,
      formOptions3,

      showPopup5: false,
      gridOptions5,
      modalOptions5,

      loading: false,
      val1: null,
      opts1,
      opts2,
      remoteConfig,
      remoteConfig2,
      woRawSub,
      equipmentConfigVoList,
      processRelVo,
      equipmentOptions,
    };
  },
  methods: {
    async addEvent() {
      const $table = this.$refs.tableRef;
      if ($table) {
        const record = {
          name: `Name_${new Date().getTime()}`,
        };
        const { row: newRow } = await $table.insert(record);
        // 激活不自动聚焦
        $table.setEditRow(newRow);
        // 激活并自动聚焦
        // $table.setEditRow(newRow, 'name')
        // 激活并自动聚焦
        // $table.setEditCell(newRow, 'name')
      }
    },
    async pushEvent() {
      const $table = this.$refs.tableRef;
      if ($table) {
        const record = {
          name: `Name_${new Date().getTime()}`,
        };
        const { row: newRow } = await $table.insertAt(record, -1);
        // 激活并自动聚焦第一个可编辑列
        $table.setEditRow(newRow, true);
      }
    },
    async insertEvent() {
      const $table = this.$refs.tableRef;
      if ($table) {
        const record = {
          name: `Name_${new Date().getTime()}`,
        };
        const { row: newRow } = await $table.insertAt(record, 2);
        $table.setEditCell(newRow, "name");
      }
    },
    async insertRow(row) {
      const $table = this.$refs.tableRef;
      if ($table) {
        const record = {
          name: `Name_${new Date().getTime()}`,
        };
        const { row: newRow } = await $table.insertAt(record, row);
        $table.setEditCell(newRow, "name");
      }
    },
    async insertChild(row) {
      const $table = this.$refs.tableRef;
      if ($table) {
        const record = {
          name: `Name_${new Date().getTime()}`,
        };
        const { row: newRow } = await $table.insertChild(record, row);
        $table.setEditCell(newRow, "name");
      }
    },
    async inputEnter(params) {
      let paras = params.split(";");
      if (paras.length < 3) {
        VxeUI.modal.message({ content: "需要包含三个;", status: "error" });
      } else {
        //订单号+数量+计划开工日期+物料编号
        try {
          const result = await addWorkOrder({
            wo: paras[0],
            qty: paras[1],
            materialCode: paras[3],
            type: "分切",
          });
          const result2 = await getEquipAndProcessByWo({
            sequence: result.data.proceduresNum,
            woType: "分切",
          });
          this.equipmentOptions.options =
            result2.data.equipmentConfigVoList.map((item) => {
              return { label: item.name, value: item.id };
            });
          this.processRelVo = result2.data.processRelVo;

          this.formData.proceduresName = this.processRelVo.proceduresName;

          // console.log("保存成功", JSON.stringify(this.formOptions.data));
          VxeUI.modal.message({ content: "保存成功", status: "success" });
          this.formData.workNo = paras[0];
          const $grid = this.$refs.gridRef.commitProxy("reload");
          this.loading = false;
          this.showPopup = false;
        } catch (error) {
          this.loading = false;
        } finally {
          // const $grid = this.$refs.gridRef.commitProxy("reload");
        }
      }
    },

    async rawInputEnter(params) {
      let paras = params.split(";");
      if (paras.length < 2) {
        VxeUI.modal.message({ content: "需要包含两个;", status: "error" });
      } else {
        //物料编号+批次编号+数量
        try {
          const result = await addWoRaw({
            rawCode: paras[0],
            batchCode: paras[1],
            wo: this.formData.workNo,
            qty: paras[2],
          });
          // console.log("保存成功", JSON.stringify(this.formOptions.data));

          let result2 = await getWoRawByPage({
            currentPage: 1,
            pageSize: 100,
            // wo: row.wo,
          });
          this.tableData2 = result2.data.records;
          VxeUI.modal.message({ content: "保存成功", status: "success" });
          const $grid = this.$refs.gridRef.commitProxy("reload");
          const $grid2 = this.$refs.gridRef2.commitProxy("reload");
          this.loading = false;
          this.showPopup = false;
        } catch (error) {
          this.loading = false;
        } finally {
          const $grid = this.$refs.gridRef2.commitProxy("reload");
        }
      }
    },
    async rollNumsInputEnter(params) {
      console.log("===>", params);

      try {
        const result = await insertWoRawRel({
          wo: this.formData.workNo,
          rollNums: params,
          type: "分切",
        });
        // console.log("保存成功", JSON.stringify(this.formOptions.data));
      } catch (error) {
      } finally {
        const $grid = this.$refs.gridRef.commitProxy("reload");
      }
    },
    async interfaceNumsInputEnter(params) {
      this.showPopup5 = true;
      console.log("====>", params);
    },
    getInsertEvent() {
      const $table = this.$refs.tableRef;
      if ($table) {
        const insertRecords = $table.getInsertRecords();
        VxeUI.modal.message({ content: "需要包含三个;", status: "warning" });
      }
    },
    parameterAcquisition() {
      this.showPopup = true;
      console.log("===>猜测是");
    },
    async resetEvent() {},
    async searchRawData(row) {
      console.log("==row==>", row);
      // let result = await getWoRawByPage({
      //   currentPage: 1,
      //   pageSize: 100,
      //   wo: row.wo,
      //   subId: row.id,
      // });
      this.woRawSub = row;
      // this.tableData2 = result.data.records;
      this.activeTab = "2";
      const $grid2 = this.$refs.gridRef2.commitProxy("reload");
      console.log(this.tableData);
    },
    async searchFaultData(row) {
      console.log("==row==>", row);
      // let result = await getWoRawByPage({
      //   currentPage: 1,
      //   pageSize: 100,
      //   wo: row.wo,
      //   subId: row.id,
      // });
      this.woRawSub = row;
      // this.tableData2 = result.data.records;
      this.activeTab = "3";
      const $grid2 = this.$refs.gridRef3.commitProxy("reload");
      console.log(this.tableData);
    },
    async recordDefective(row) {
      this.showPopup3 = true;
      /**
       * 等会
       */
      this.modalOptions3.title = "子卷的缺陷信息";
      this.formOptions3.data.woRawSubId = row.id;
    },
    async submitEvent() {
      console.log("====>submitEvent===>");

      console.log("====>", this.formOptions.data);
      this.showPopup = false;
      try {
        await insertWoRawRel({
          wo: this.formData.workNo,
          ...this.formOptions.data,
        });
      } catch (error) {
      } finally {
        const $grid = this.$refs.gridRef.commitProxy("reload");
        this.formOptions.data.length = null;
      }

      // const $form = this.$refs.formRef;
      // if ($form) {
      //   const errMaps = await $form.validate();
      //   if (!errMaps) {
      //     VxeUI.modal.message({ content: "验证成功", status: "success" });
      //   }
      // }
    },
    async updateRow(row) {
      console.log("===>", row);
    },
    async updateWoRawStatus(row) {
      //这个需要赋值
      this.formOptions2.data = row;
      this.showPopup2 = true;
    },
    async submitEvent2() {
      console.log("===>submitEvent2", this.formOptions2.data);
      this.showPopup2 = false;
      try {
        await updateWoRawStatus({
          ...this.formOptions2.data,
        });
      } catch (error) {
      } finally {
        const $grid = this.$refs.gridRef2.commitProxy("reload");
      }
    },
    /**
     * 提交不良记录
     */
    async submitEvent3() {
      this.showPopup3 = false;
      try {
        await addWoRawSubRelFault({ ...this.formOptions3.data });
      } catch (error) {
      } finally {
        const $grid3 = this.$refs.gridRef3.commitProxy("reload");
      }
      // const result = await addWoRawSubRelFault({ ...this.formOptions3.data });
      // console.log("==this.formOptions3.data==>", this.formOptions3.data);
    },
    async startWoRawClick() {
      console.log("====>startWoRaw====>");

      try {
        await startWoRaw({
          wo: this.formData.workNo,
          ...this.formOptions.data,
        });
      } catch (error) {
      } finally {
        const $grid = this.$refs.gridRef.commitProxy("reload");
      }
    },
    async endWoRawClick() {
      console.log("====>endWoRaw====>");

      try {
        await endWoRaw({
          wo: this.formData.workNo,
          ...this.formOptions.data,
        });
      } catch (error) {
      } finally {
        const $grid = this.$refs.gridRef.commitProxy("reload");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: calc(100vh - 130px);
}
</style>
